<template>
    <el-container>
        <el-header style="border-bottom: 1px solid #64b587be;height:50px;background-color: #41B883;">
            <el-row :span="20" style="margin: 8px 10px;">
                <el-col :span="1">
                    <a style="font-size: 30px;">
                        <i class="el-icon-arrow-left" @click="goTo()" style="color:white;"></i>
                    </a>
                </el-col>
                <el-col :span="10" :offset="7">
                    <div style="color:white;">我的二维码</div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div id="qrcode"></div>
            <!-- <el-button type="primary" @click="payOrder">生成二维码</el-button>
            <el-dialog
            width="30%"
            :title="payment"
            @close="closeCode"
            :visible.sync="innerVisible"
            append-to-body>
            <div class="paycode">
                <div id="qrcode" ref="qrcode"></div>
            </div>
            </el-dialog> -->
        </el-main>
    </el-container>
</template>

<script>
import QRCode from 'qrcodejs2'
export default({
    name:"QRCode",
    data() {
        return{
        }
    },
    methods:{
        goTo(){
            this.$router.push({path:'/persons'})
        },
        handleChange(val) {
            console.log(val);
        },
        qrcode () {
            var qrcode = new QRCode("qrcode", {
                text: "https://www.baidu.com",
                width: 160,
                height: 160,
            });
            console.log(qrcode)
        },
        /*payOrder () {
            this.innerVisible = true
            // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
            this.qrcode = 'https://www.baidu.com'
            // 使用$nextTick确保数据渲染
            this.$nextTick(() => {
            this.crateQrcode()
            })
        },
        // 生成二维码
        crateQrcode () {
            this.qr = new QRCode('qrcode', {
            width: 150,
            height: 150, // 高度
            text: this.qrcode // 二维码内容
            // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            // background: '#f0f'
            // foreground: '#ff0'
            })
            // console.log(this.qrcode)
        },
        // 关闭弹框,清除已经生成的二维码
        closeCode () {
            this.$refs.qrcode.innerHTML = ''
        }*/
    },
    mounted () {
        this.qrcode()
    }
})
</script>

<style scoped>
    .el-container{
        height: 812px;
        display: flex;
        font-size: 25px;
        /*background-color: wheat;*/
    }

    .el-header,.el-main{
        /*background-color: #64b587be;*/
        padding: 0;
    }

    .el-main{
        border-top: 1px solid #64b5873f;
        width: 100%;
        background-color: white;
    }

    #qrcode{
        width: 100%;
        height: 200px;
        text-align: center;
        margin: 110px;
        margin-top: 50px;
    }
        
</style>